import React from 'react'
import {List,InputItem,WingBlank,WhiteSpace,Button} from 'antd-mobile'
import {connect} from 'react-redux'

import Logo from '../../components/logo/logo'
import '../login/login.css'
import {register,getCode} from '../../redux/loginAndReg'



@connect(
    state => state.loginAndReg,
    {
        register,
        getCode
    }
)
class Register extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            password: '',
            repeatpwd:'',
            verification_user: '',
            verification:'',
            sex: 0,
            age: 18,
            birthday: '2012-12-12',
            site: '四川成都',
            mailbox: '554894305@qq.com'
        }
    }
    componentDidMount() {
        this.props.getCode()
    }
    handleChange(key,val) {
        this.setState({
            [key]: val
        })
    }
    handleLogin() {
        this.props.history.push('/login')
    }
    register() {
        this.props.register({...this.state,verification:String(this.props.data)})
    }
    render() {
        return (
            <div>
                <Logo />
                <WingBlank>
                    {this.props.msg ? <p className="msg">{this.props.msg}</p> : ''}
                    <List>
                        <InputItem
                            onChange={value=>this.handleChange('username',value)}
                            placeholder="请输入用户名"
                        >用户</InputItem>
                        <InputItem
                            type = 'password'
                            placeholder="请输入密码"
                            onChange={value=>this.handleChange('password',value)}
                        >密码</InputItem>
                        <InputItem 
                            type = 'password'
                            placeholder="请确认密码"
                            onChange={value=>this.handleChange('repeatpwd',value)}
                        >确认密码</InputItem>
                        <InputItem 
                            type = 'text'
                            placeholder="请输入验证码"
                            onChange={value=>this.handleChange('verification_user',value)}
                            className="yzm_input"
                            maxLength="4"
                        >验证码<p className="yzm" onClick={() => this.props.getCode()} ><span>{this.props.data}</span></p></InputItem>

                    </List>
                    <WhiteSpace />
                    <div className="forgetPwd">
                        <span>忘记密码</span>
                    </div>
                    <WhiteSpace />
                    <Button type="primary" onClick={this.register.bind(this)}>注册</Button>
                    <WhiteSpace />
                    <Button type="primary" onClick={this.handleLogin.bind(this)}>登录</Button>
                </WingBlank>
            </div>
        )
    }
}

export default Register